<template>
  <view class="discover_note_topic" :data-theme="theme">
    <view class="header">
      <view class="name color28 mb20">
        <text class="iconfont icon-huati mr20"></text>
        {{ topicDetails.name ? topicDetails.name : '' }}
      </view>
      <view class="noteNum">
        {{ (topicDetails.noteNum && topicDetails.noteNum < 10000) ? topicDetails.noteNum + '篇内容' : topicDetails.noteNum && (topicDetails.noteNum / 10000).toFixed(2) + '万篇内容' }}
      </view>
    </view>
    <view class="borderPad">
      <view class="acea-row row-center-wrapper tab">
        <view :class="params.type == 'hot'? 'on' : ''" class="nav-item" @click="onChange('hot')">最热</view>
        <view :class="params.type == 'new'? 'on' : ''" class="nav-item" @click="onChange('new')">最新</view>
      </view>
    </view>
    <view class="borderPad">
      <WaterfallsFlow v-if="noteTopicList.length" :wfList="noteTopicList" :fromType="1">
      </WaterfallsFlow>
    </view>
    <view class="publish" @click="publish">
      <text class="iconfont icon-fabu2"></text>
      立即发布
    </view>
  </view>
</template>

<script>
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
import animationType from '@/utils/animationType.js';
import {
  topicCountApi,
  noteTopicListApi
} from '@/api/discover.js';

let app = getApp();
export default {
  components: {
    WaterfallsFlow
  },
  data() {
    return {
      theme: app.globalData.theme,
      params: {
        page: 1,
        limit: 10,
        topicId: 0,
        type: 'hot'
      },
      loadend: false,
      loading: false,
      noteTopicList: [],
      topicDetails: {}
    }
  },
  watch: {
    'params.type': {
      handler: function (newV, oldV) {
        if (newV) {
          this.noteTopicList = [];
          this.getNoteTopicList();
        }
      },
      deep: true
    }
  },
  onLoad(options) {
    this.params.topicId = options.topicId;
    this.getTopicCount();
    this.getNoteTopicList();
  },
  onReachBottom() {
    this.getNoteTopicList(); // 推荐
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit('scroll');
  },
  methods: {
    //发布内容
    publish() {
      // #ifdef MP || H5
      uni.navigateTo({
        url: `/pages/discover/discover_release/index`
      })
      // #endif
      // #ifdef APP-PLUS
      uni.navigateTo({
        animationType: animationType.type,
        animationDuration: animationType.duration,
        url: `/pages/discover/discover_release/index`
      })
      // #endif
    },
    //点击切换
    onChange(type) {
      this.params.page = 1;
      this.params.type = type;
      this.loading = false;
      this.loadend = false;
    },
    //话题
    getTopicCount() {
      topicCountApi(this.params.topicId).then(res => {
        this.topicDetails = res.data;
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      });
    },
    //关注内容
    getNoteTopicList() {
      if (this.loadend) return;
      this.loading = true;
      noteTopicListApi(this.params).then(res => {
        this.$set(this.params, 'page', this.params.page + 1);
        this.loadend = this.params.page > res.data.totalPage;
        this.noteTopicList = this.noteTopicList.concat(res.data.list || []);
        this.loading = false
      }).catch(err => {
        this.loading = false;
        uni.showToast({
          title: err,
          icon: 'none'
        })
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.publish {
  position: fixed;
  z-index: 9999;
  width: 240rpx;
  height: 76rpx;
  opacity: 1;
  border-radius: 38rpx;
  bottom: 142rpx;
  right: 50%;
  margin-right: -60px;
  color: #fff;
  line-height: 76rpx;
  text-align: center;
  @include linear-gradient(theme);
  font-size: 30rpx;

  .iconfont {
    font-size: 28rpx;
    margin-right: 16rpx;
  }
}

.nav-item {
  font-size: 32rpx;
  color: #999;

  &:first-child {
    margin-right: 70rpx;
  }

  &.on {
    position: relative;
    font-size: 38rpx;
    color: #333;
    font-weight: bold;

    &::after {
      content: "";
      width: 40rpx;
      height: 5rpx;
      @include main_bg_color(theme);
      position: absolute;
      bottom: -10rpx;
      left: 14rpx;
    }
  }
}

.discover_note_topic {
  background-color: #fff;
  position: relative;
}

.tab {
  border-top: 1px solid #EEEEEE;
  padding: 30rpx 0 37rpx 0;
}

.header {
  padding: 40rpx 24rpx;


  .name {

    font-size: 34rpx;
    font-weight: 600;
  }

  .noteNum {
    font-size: 24rpx;
    color: #666666;
  }
}
</style>